<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>webapp</title>
    <link href="lib/zepto-onepagescroll/zepto.onepagescroll.css" rel="stylesheet" type="text/css">
    <script src="lib/zepto/zepto.js"></script>
    <script src="lib/zepto/src/fx.js"></script>
    <script src="lib/zepto/src/touch.js"></script>
    <script src="lib/zepto-onepagescroll/zepto.onepagescroll.js"></script>
    <style>
        .onepage-wrapper section:nth-child(odd) {background-color: aliceblue;}
        .onepage-wrapper section:nth-child(even) {background-color: #f0f0f0;}
        .onepage-wrapper section {text-align: center; font-size: 48px;}
    </style>
</head>
<body>

<div class="main onepage-wrapper">
    <section class="page page1 ops-section" data-index="1">1</section>
    <section class="page page2 ops-section" data-index="2">2</section>
    <section class="page page3 ops-section" data-index="3">3</section>
    <section class="page page4 ops-section" data-index="4">4</section>
    <section class="page page5 ops-section" data-index="5">5</section>
    <section class="page page6 ops-section" data-index="6">6</section>
    <section class="page page7 ops-section" data-index="7">7</section>
    <section class="page page8 ops-section" data-index="8">8</section>
    <section class="page page9 ops-section" data-index="9">9</section>
</div>

<div class="loading hide" style="height: 480px;">
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

<script>
// onePageScroll
Zepto(function($){
    $(".main").onePageScroll({
        loop: false,
        easing: "linear",
        animationTime: 600,
        pagination: false
    });
});
</script>
</body>
</html>